<template>
  <div>
    <p class="title">品类管理-添加品类</p>
    <div style="margin-left: 40px;margin-top: 40px">
      <span style="font-size: 20px">所属品类</span>
      <el-select v-model="value" placeholder="/所有">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="'/所有/'+item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </div>
    <div style="margin-top: 40px;margin-left: 40px">
      <span style="font-size: 20px">品类名称</span>
      <el-input v-model="input" style="width: 400px" placeholder="请输入内容"></el-input>
    </div>
    <el-button type="primary" @click="cook()" class="btn">提交</el-button>
    {{value}}
  </div>
</template>

<script>
import {fakeradd,fakerok} from "../../request/http";
export default {
    data(){
        return{
            value:"",
            input:"",
            categoryId:0,
            options:[]
        }
    },
        mounted() {
          this.fakeradd()
        },
        methods:{
         fakeradd(){
           fakeradd(this.categoryId).then(res=>{
             console.log(res)
             this.options=res.data.data
             const obj = {
               name: "",
               value: 0,
               id: 0
             };
             this.options.unshift(obj);
           })

         },
          cook(){
           fakerok({
              id:this.value,
              name:this.input
           }).then((res)=>{
             this.$message( {
               message:"品类提交成功",
               type:"message"
             })
             this.$router.push("/leishop")
           })
          },
          obd(k){
            console.log(k)
          }
        }
};
</script>

<style lang="scss" scoped>
@import "@/Scss/index.scss";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.title {
  @include FontOnly(35px);
  margin-bottom: 30px;
}
.btn {
  width: 50px;
  height: 25px;
  margin-left: 125px;margin-top: 20px
}
</style>